<template>
  <el-dialog :title="title"  class="ableBuyer" :visible.sync="isShowModel" @close="$emit('update:isShowDetail', false)" :before-close="handleClose" :close-on-click-modal="false">
    <el-form :model="buyerInfo" :inline="false" label-width="120px" :rules="rules" ref="buyerInfo">
      <el-form-item label="名称：" required>
        {{dataInfo.name}}
      </el-form-item>
      <el-form-item label="解禁：" required prop="status">
        <el-checkbox v-model="buyerInfo.status" disabled>{{title}}</el-checkbox>
      </el-form-item>
      <el-form-item label="解禁理由：" required prop="content">
        <el-input
          v-model="buyerInfo.content"
          autocomplete="off"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 6}"
          placeholder="请输入解禁理由（必填）"></el-input>
        <p class="textAreaMsg">{{buyerInfo.content ? buyerInfo.content.length : 0}}/150</p>
      </el-form-item>
      <p class="tip" v-if="title === '启用供应商'">正在解禁供应商，解禁后供应商恢复登陆和操作任何的能力，请谨慎操作操作不可撤销</p>
      <p class="tip" v-if="title === '启用采购商'">正在解禁采购商，解禁后采购商恢复登陆和操作任何的能力，请谨慎操作操作不可撤销</p>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetModel">取 消</el-button>
      <el-button type="primary" @click="submitStatus" :loading="isSuccess">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: "AbleBuyer",
    props: {
      isShowDetail: {
        type: Boolean,
        default: false
      },
      dataInfo: {
        type: Object,
        default: () => {}
      },
      url: {
        type: String,
        default: ""
      },
      id: {
        type: Number,
        default: 0
      },
      title: {
        type: String,
        default: "启用采购商"
      }
    },
    data() {
      return {
        isShowModel: this.isShowDetail,
        buyerInfo: {
          status: true,
          content: ""
        },
        isSuccess: false,
        rules: {
          content: [
            { required: true, message: '请输入解封理由', trigger: 'blur' },
            { max: 150, message: '输入的解封理由字数不能超过150个字符', trigger: ['blur', 'change'] }
          ]
        }
      }
    },
    methods: {
      submitStatus() {
        let data = {
          ...this.buyerInfo,
          id: this.id,
          status: 1
        }
        this.$refs['buyerInfo'].validate((valid) => {
          if (valid) {
            ajax.post(this.url, data).then(res => {
              if(res.code === "10000000") {
                this.$message({
                  type: 'success',
                  message: '解禁成功!'
                });
                this.isSuccess = false
                this.$emit('fresh')
                this.resetModel()
              } else {
                this.$message.error(res.message)
                this.isSuccess = false
              }
            })
          }
        })
      },
      handleClose(done) {
        this.$refs['buyerInfo'].resetFields()
        this.isShowModel = false
        done()
      },
      resetModel() {
        this.$refs['buyerInfo'].resetFields()
        this.isShowModel = false
      }
    },
    computed: {

    },
    watch: {
      isShowDetail(val) {
        this.isShowModel = val;
      }
    }
  }
</script>

<style lang="scss">
  .ableBuyer {
    .el-dialog {
      width: 500px;
      .textAreaMsg {
        width: 100%;
        text-align: right;
      }
      .tip {
        width: 100%;
        text-align: center;
        font-size: 12px;
        color: #999;
      }
    }
  }
</style>
